<template>
  <div>
    <div
      id="monthChart"
      ref="lineChart"
      style="width:100%;height:calc((90vh - 85px)/2)"
    />
    <!-- style="width:100%;height:calc((90vh - 105px)/2)" -->
  </div>
</template>
<script>
export default {
  // prettier-ignore
  props: {
    // y值
    day: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },

  watch: {
    day() {
      this.initChart()
    },
  },
  methods: {
    initChart() {
      const data1 = this.day.map((item) => {
        return item.title
      })
      const data2 = this.day.map((item) => {
        return item.num
      })
      const data3 = this.day.map((item) => {
        return item.numplan
      })
      const options = {
        title: {
          text: '今日保养计划',
          top: 0,
          textStyle: {
            fontWeight: 'normal',
            color: '#1ab6e9',
            fontSize: 11,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          data: ['计划时长', '实际时长'],
          right: '3%',
          itemWidth: 15,
          itemHeight: 9,
          textStyle: {
            color: '#aaa',
            fontSize: 9,
          },
        },
        grid: {
          top: '15%',
          left: '2%',
          right: '2%',
          bottom: '1%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: false,
            formatter: '{value} ',
            color: '#aaa',
            fontSize: 7,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#0e2b68',
            },
          },

          axisLine: {
            show: false,
            lineStyle: {
              color: '#0e2b68',
            },
          },
        },
        yAxis: {
          type: 'category',
          data: data1,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#042875',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: '{value} ',
            color: '#aaa',
            fontSize: 7,
          },
        },
        series: [
          {
            name: '计划时长',
            type: 'bar',
            data: data3,
            color: '#20a3d4',
            label: {
              show: true,
              color: '#fff',
              fontSize: 9,
              position: 'outside',
            },
          },
          {
            name: '实际时长',
            type: 'bar',

            color: '#2cd4aa',
            data: data2,
            label: {
              show: true,
              color: '#fff',
              fontSize: 9,
              position: 'outside',
            },
          },
        ],
      }
      const myChart = this.$echarts.init(this.$refs.lineChart)
      myChart.setOption(options)
    },
  },
}
</script>
